前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇文章介紹如何建立一個React專案

1. 建置環境
2. 建置專案
3. 啟動專案

這一篇則會針對React語法進一步做講解了

JSX文章中，學會了如何建立一個React元件，並且學會了元件之間有父子元件的關係

這篇會介紹React Props的概念，包含了

1. React 元件宣告
2. React Props

React 元件宣告

在這邊先講解一下React元件的語法以及宣告，先使用前篇JSX文章中的語法來講解。

import React from 'react';
import ReactDOM from 'react-dom/client';

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

用以上的程式碼可以知道，首先宣告了一個元件叫做myElement，並且在root做渲染。

不過除了在一個檔案中進行渲染以外，也可以從另一個檔案中載入已寫好的元件。

因此先重新針對以上檔案做一下修改，檔名命名為 app.js

另外宣告了一個元件叫做fruit.jsx，這邊也進行兩種宣告

app.js

import React, { Component } from 'react';
import Fruit from './fruits';

class App extends Component {
    render() {
        return (
            <div className="App">
                <ul>
                    <Fruit fruit_name="banana"/>
                    <Fruit fruit_name="apple"/>
                </ul>
            </div>

        );
    }
}

export default App;

fruits.jsx

函式宣告

import React from 'react';

const Fruit = (props) => {
    return <p> this is {props.fruit_name}.</p>
}

export default Fruit;

類別宣告

import React from 'react';

class Fruit extends React.Component {
    render() {
      return (
        <p> this is {this.props.fruit_name}.</p>
      );
    }
  }

export default Fruit;

以上兩種宣告方式皆可以傳入props，不過現在主流還是直接使用函式宣告，寫法相對簡潔。

React Components、 Component instance、 Elements 差異

1. React element 在JSX中，是由HTML element及JavaScript構成的。
2. Component是函式宣告或是類別宣告中的回傳值。
3. Component instance則是Component的實例。

import React, { Component } from 'react';

const Fruit = (props) => {  // Fruit() 為component
    return <p> this is {props.fruit_name}.</p> // <p></p> 裡面的為element
}

const banana = <Fruit fruit_name="banana" /> // banana 為元件的實例 component instance

class App extends Component {
    render() {
        return (
            <div className="App">
                <ul>
                    {banana}
                    <Fruit fruit_name="apple" />
                </ul>
            </div>

        );
    }
}

export default App;

React Props

在父元件以及子元件中，如果要傳遞參數值，類似函數中的引數（argument）概念的話，可以使用props做傳遞。不過函數宣告的元件以及類別宣告的元件還是會有些許的不同。

函數宣告

可以發現函數宣告類似於引數，因此外部元件做使用時，只要使用參數的方式就可以傳入，而函式元件本身只要使用 props.[變數名稱] 就可以傳入

import React from 'react';

const Fruit = (props) => {
    return <p> this is {props.fruit_name}.</p>
}

export default Fruit;

類別宣告

類別本身是物件導向程式語言會有的概念，一個類別中會有屬於自己的變數，並且透過{this.props.[變數名稱]}來去做props的傳入

import React from 'react';

class Fruit extends React.Component {
    render() {
      return (
        <p> this is {this.props.fruit_name}.</p>
      );
    }
  }

export default Fruit;

結語

本篇文章除了講解了React props 參數傳遞的概念以外，也講解了不同方式的元件宣告。

另外也講解了，React Components、 Component instance、 Elements 差異。

希望以上的內容可以對讀者有幫助。

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～